<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>悠悠有品</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/1.css') }}">

     <style>
.center {
    background-image: url(../static/imgs/sell.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 1000px;
}
    </style>
</head>
<body>
<div class="head">
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link" href="http://127.0.0.1:5000/index/">首页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="http://127.0.0.1:5000/sp/">商品</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">我也要卖</a>
        </li>
        <li class="nav-item">
           <a class="nav-link" href="http://127.0.0.1:5000/buyAdmin/">我的购买</a>
        </li>
        {% if user %}
            <li class="nav-item">
                <a class="nav-link" href="http://127.0.0.1:5000/admin/">欢迎您：{{ user.name }}，剩余余额：{{ user.balance }}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="http://127.0.0.1:5000/logout/">注销</a>
            </li>
        {% else %}
            <li class="nav-item">
                <a class="nav-link" href="http://127.0.0.1:5000/login/">登录</a>
            </li>
        {% endif %}

    </ul>


</div>
<div class="center">
    <div class="form-box">
        <form action="http://127.0.0.1:5000/sell/" method="post" enctype="multipart/form-data">

            <div class="form-group">
                <label for="exampleFormControlInput1">商品名称</label>
                <input
                         type="text" class="form-control"
                        id="exampleFormControlInput1"
                        placeholder="请填写商品名称"
                        name="g_name"
                >
                <label for="exampleFormControlInput1">商品描述</label>
{#                <input#}
{#                         type="text" class="form-control"#}
{#                        id="exampleFormControlInput1"#}
{#                        placeholder="请填写商品描述"#}
{#                        name="describe"#}
{#                >#}
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="describe"></textarea>
                <label for="exampleFormControlSelect1">请选择商品类型</label>
                <select class="form-control" id="exampleFormControlSelect1" name="g_type">
                    <option value="1">大狙</option>
                    <option value="2">步枪</option>
                    <option value="3">冲锋枪</option>
                    <option value="4">手枪</option>
                    <option value="5">近战</option>
                </select>
                <label for="exampleFormControlInput1">商品价格</label>
                <input
                        type="text" class="form-control"
                        id="exampleFormControlInput1"
                        placeholder="请输入商品价格"
                        name="price"
                >

                <label for="exampleFormControlInput1">请上传商品图片</label>
                <br>

                <input type="file" id="user-photo" name="img">

                <div id="show-picture"></div>
            </div>
            <button type="submit" class="btn btn-warning">确定添加</button>
        </form>
    </div>

</div>
</body>
<script>
    var getUserPhoto = document.getElementById("user-photo");
    getUserPhoto.onchange = function () {
        var file = this.files;
        console.log(file);
        var reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onload = function () {
            var image = document.createElement("img");
            image.width = "400";
            image.src = reader.result;
            var showPicture = document.getElementById("show-picture");
            showPicture.append(image);
        };
    };
</script>
</body>
</html>